<template>
	<div class="taskm-wrap" v-loading ="loading">
		<!-- 我发出的/我收到的 -->
		<div class="taskm-wrap-title">
			<p 
				v-for="item in type" 
				:key="item.id"
				:class="['taskm-wrap-text',{'text-active':sendIndex === item.id}]"
				@click="changeClick(item.id)"
			>{{item.value}}
			</p>
		</div>
		<!-- 我发出的 -->
		<div class="one" v-if="sendIndex === 1">
			<div class="select-detail">
				<div class="select-time">
					<div class="time-left">
						<p class="time-left-txt">推广日期: </p>
						<div class="time-box">
							<div class="time-select">
								<el-date-picker
									v-model="startTime"
									:picker-options="startTimeLimit"
									class="time-style"
									type="date"
									size="small"
									value-format="yyyy-MM-dd"
									placeholder="开始日期"
								>
								</el-date-picker>
								<!-- <img src="~assets/images/calendar1.png" class="calendar1">
								<img src="~assets/images/calendar1.png" class="calendar2"> -->
							</div>
							<p>至</p>
							<div class="time-select">
								<el-date-picker
									v-model="endTime"
									:picker-options="endTimeLimit"
									type="date"
									class="time-style"
									size="small"
									value-format="yyyy-MM-dd"
									placeholder="结束日期"
								>
								</el-date-picker>
							</div>
						</div>
					</div>
				</div>
				<div class="order-right">
					<div class="order-status">任务状态:</div>
					<div class="order-all">
						<el-select 
							v-model="status" 
							placeholder="全部"
							popper-class="select-popper"
							@change="changeStatus($event)"
						>
							<el-option
								v-for="item in options"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<!-- 任务名称 -->
			<div class="order-wrap-code">
				<div class="order-brief">
					<div class="order-text-r">
						<div class="order-left-name">任务名称:</div>
					</div>   
					<input type="text" placeholder="请输入任务名称" v-model="name" @keyup.enter="queryOrder">
				</div>
				<el-button 
					class="order-wrap-query" 
					type="primary" 
					plain 
					@click="queryOrder"
				>查询任务
				</el-button>
			</div> 
			<!-- 任务列表 -->
			<div class="ta-list-container">
				<ul class="ta-list-wrapper">
					<li class="ta-wrap-list one">
						<div class="ta-wrap-item name">任务名称</div>
						<div class="ta-wrap-item date">推广日期</div>
						<div class="ta-wrap-item plat">指定平台</div>
						<div class="ta-wrap-item anchor">指定主播</div>
						<div class="ta-wrap-item budget">任务预算</div>
						<div class="ta-wrap-item time">发布时间</div>
						<div class="ta-wrap-item status">任务状态</div>
						<div class="ta-wrap-item operation">操作</div>
					</li>
					<template  v-if="taskList.length">
						<li class="ta-wrap-list two" v-for="(item,key) in taskList" :key="key">
							<div class="ta-wrap-item name">
								<p class="ta-wrap-text" :title="item.name">{{item.name}}</p>
							</div>
							<div class="ta-wrap-item date">
								<div class="ta-wrap-date">{{item.startTime}}</div>
								<div class="ta-wrap-date">-</div>
								<div class="ta-wrap-date">{{item.endTime}}</div>
							</div>
							<div class="ta-wrap-item plat">{{item.platformName}}</div>
							<div class="ta-wrap-item anchor">{{item.anchorName}}</div>
							<div class="ta-wrap-item budget">{{item.budget}}元</div>
							<div class="ta-wrap-item time">{{item.createTime}}</div>
							<div class="ta-wrap-item status">
								<div :class="changeFontColor(item)">{{item.status}}</div>
								<!-- 只有对接完成的才加个margin值 -->
								<div :class="{'status-success-margin':item.status === '对接完成'}">{{connect(item)}}</div>
							</div>
							<div class="ta-wrap-item operation">
								<div class="ta-operation-btn" @click="btnOpr1(key,1)" :class="{'ta-o-active':index === key && oprIndex === 1}">详情</div>
								<div class="ta-operation-btn" :class="cancelBtn(key,item)" v-show="item.status === '审核中'" @click="btnOpr1(key,2)">取消</div>
							</div>
						</li>
					</template>
					<li class="no-wrap" v-else>暂无数据</li>
				</ul>
				<!-- <div class="pagination" v-show = "pageSize >= 8"> -->
				<div class="pagination"  v-show = "total > 0">
					<el-pagination
						background
						:current-page = "pageNum"
						@current-change="changeCurrentPage1"
						:page-sizes="[8,16,24]"
						@size-change="changeCurrentPageSize1"
						:total = "total"
						layout="total, sizes, prev, pager, next, jumper"
					>
					</el-pagination>
					<div class="pageSearch" @click="pageSearch1">确定</div>
				</div>
			</div>
		</div>
		<!-- 我收到的 -->
		<div class="two" v-if="sendIndex === 2">
			<div class="select-detail">
				<div class="select-time">
					<div class="time-left">
						<p class="time-left-txt">推广日期: </p>
						<div class="time-box">
							<div class="time-select">
								<el-date-picker
									v-model="startTime"
									:picker-options="startTimeLimit"
									class="time-style"
									type="date"
									size="small"
									value-format="yyyy-MM-dd"
									placeholder="开始日期"
								>
								</el-date-picker>
								<!-- <img src="~assets/images/calendar1.png" class="calendar1">
								<img src="~assets/images/calendar1.png" class="calendar2"> -->
							</div>
							<p>至</p>
							<div class="time-select">
								<el-date-picker
									v-model="endTime"
									:picker-options="endTimeLimit"
									type="date"
									class="time-style"
									size="small"
									value-format="yyyy-MM-dd"
									placeholder="结束日期"
								>
								</el-date-picker>
							</div>
						</div>
					</div>
				</div>
				<div class="order-right">
					<div class="order-status">任务状态:</div>
					<div class="order-all">
							<el-select 
								v-model="status" 
								placeholder="全部"
								popper-class="select-popper"
								@change="changeStatus1($event)"
							>
							<el-option
								v-for="item in options1"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
							</el-select>
					</div>
				</div>
			</div>
			<!-- 任务名称 -->
			<div class="order-wrap-code">
				<div class="order-brief">
					<div class="order-text-r">
						<div class="order-left-name">任务名称:</div>
					</div>   
					<input type="text" placeholder="请输入任务名称" v-model="name" @keyup.enter="queryOrder">
				</div>
				<el-button 
					class="order-wrap-query" 
					type="primary" 
					plain 
					@click="queryOrder"
					>查询任务
				</el-button>
			</div> 
			<!-- 任务列表 -->
			<div class="ta-list-container">
				<ul class="ta-list-wrapper">
					<li class="ta-wrap-list one">
						<div class="ta-wrap-item name">任务名称</div>
						<div class="ta-wrap-item date">推广日期</div>
						<div class="ta-wrap-item plat">指定平台</div>
						<div class="ta-wrap-item anchor">指定主播</div>
						<div class="ta-wrap-item budget">任务预算</div>
						<div class="ta-wrap-item time">发布时间</div>
						<div class="ta-wrap-item status">任务状态</div>
						<div class="ta-wrap-item operation">操作</div>
					</li>
					<template  v-if="taskList.length">
						<li class="ta-wrap-list two" v-for="(item,key) in taskList" :key="key">
							<div class="ta-wrap-item name">
								<p class="ta-wrap-text" :title="item.name">{{item.name}}</p>
							</div>
							<div class="ta-wrap-item date">
								<div class="ta-wrap-date">{{item.startTime}}</div>
								<div class="ta-wrap-date">-</div>
								<div class="ta-wrap-date">{{item.endTime}}</div>
							</div>
							<div class="ta-wrap-item plat">{{item.platformName}}</div>
							<div class="ta-wrap-item anchor">{{item.anchorName}}</div>
							<div class="ta-wrap-item budget">{{item.budget}}元</div>
							<div class="ta-wrap-item time">{{item.createTime}}</div>
							<div class="ta-wrap-item status">
								<div :class="changeFontColor(item)">{{item.status}}</div>
								<div :class="{'status-success-margin':item.status === '对接完成'}">{{connect(item)}}</div>
							</div>
							<div class="ta-wrap-item operation">
								<div class="ta-operation-btn1 jump" @click="btnOpr2(key,0)">详情</div>
								<div class="ta-operation-btn1 jump" v-show="item.status === '对接中'" @click="btnOpr2(key,1)" :class="cancelBtn1(key,item)">接受</div>
								<div class="ta-operation-btn1 jump" v-show="item.status === '对接中'" @click="btnOpr2(key,2)" :class="cancelBtn1(key,item)">拒绝</div>
							</div>
						</li>
					</template>
					<li class="no-wrap" v-else>暂无数据</li>
				</ul>
				<!-- <div class="pagination" v-show = "pageSize >= 8"> -->
				<div class="pagination">
					<el-pagination
						background
						:current-page = "pageNum"
						@current-change="changeCurrentPage"
						:page-sizes="[8,16,24]"
						@size-change="changeCurrentPageSize"
						:total = "total"
						layout="total, sizes, prev, pager, next, jumper"
					>
					</el-pagination>
					<div class="pageSearch" @click="pageSearch">确定</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
 	async fetch({store}) {
    await store.commit('setMyAddFans',2)
 	},
 	layout: "internalouts",
 	data(){
		return{
			index:0,//控制操作按钮的状态切换-我发出的
			index1:0,//控制操作按钮的状态切换-我收到的
			oprIndex:null,//控制操作按钮的状态切换-我发出的
			index1:0,//控制操作按钮的状态切换-我收到的
			oprIndex1:null,//控制操作按钮的状态切换-我收到的
			startTime:'',//开始时间
			endTime:'' ,//结束时间
			startTimeLimit:{
				disabledDate:(time) =>{
					if(this.endTime){
						return time.getTime() >= new Date(this.endTime).getTime() //结束日期要大于开始日期
					}
				},
			},
			endTimeLimit:{
				disabledDate:(time) =>{
					if (this.startTime) {
						return time.getTime() < new Date(this.startTime).getTime() - 1 * 24 * 60 * 60 * 1000
					}
				}
			},
			taskList:[//商品列表
			],
			options: [
				{//下拉菜单选项
				id: null,
				label: '全部'
				},
				{//下拉菜单选项
				id: 1,
				label: '审核中'
				}, {
				id: 2,
				label: '对接中'
				}, {
				id: 3,
				label: '对接完成'
				}, {
				id: 4,
				label: '未通过'
				}, {
				id: 5,
				label: '已取消'
				}
		 	],
			status:"",
			taskId:0, //任务ID
			sendIndex:1,//我发出的我收到的状态切换
			name:'',
			type:[
				{
					id:1,
					value:'我发出的'
				},
				{
					id:2,
					value:'我收到的'
				}
			],
			typeId:'', //typeId 判断是发出的还是收到的
			loading:false,
			// 我收到的
			options1: [
				{ id: null, label: '全部'},
				{ id: 2, label: '对接中'},
				{ id: 3, label: '对接完成'},
				{ id: 5, label: '已取消'},
		 	],
			successConnect:'(已成功对接连麦)',
			pageNum:1, //第一页
			pageSize:8, //每页的条数
      total:0, //总条数
      loading:false, //页面加载效果
		}
  },
	computed:{
		cancelBtn(){ //按钮禁用不等于审核中才禁用
			return function(key,item){  //审核中才显示取消按钮
				return{	
					'ta-o-active': this.index === key && this.oprIndex === 2,
					'btn-disabled': item.status !== "审核中", 
				}
			}
		},
		changeFontColor(){//绿色字体:[审核中 对接中 对接完成]，红色字体:[取消，审核失败，已拒绝]
			return function(item){
				return {
					'one-acticve':item.status === '对接完成',
					'one-acticve1':item.status === '审核中',
					'one-acticve2':item.status === '对接中',
					'two-active':item.status === '取消', 
					'two-active1':item.status === '审核失败',
					'two-active2':item.status === '已拒绝', 
				}
			}
		},
		connect(){ //控制'(已成功对接连麦)显示或者隐藏
			return function(item){
				return  item.status == "对接完成" ? this.successConnect : ''
			}
		},
		cancelBtn1(){ //按钮的禁用 对接中才显示取消按钮
			return function(key,item){
				return{
					'ta-o-active': this.index === key && this.oprIndex === 2,
					'btn-disabled': item.status !== "对接中",
				}
			}
		},
	},
  methods:{
		// 我发出的分页操作
	  changeCurrentPage1(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
			this.getData(); //调用商品列表接口
			this.$scrollTo();
    },
    changeCurrentPageSize1(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
			this.getData();//调用商品列表接口
			this.$scrollTo();
    },
    pageSearch1(){ //点击确定按钮时候调用分页事件
			this.getData();//调用商品列表接口
			this.$scrollTo();
		},
		// 我收到的分页操作
		changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
			this.getData(); //调用商品列表接口
			this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
			this.getData();//调用商品列表接口
			this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
			this.getData();//调用商品列表接口
			this.$scrollTo();
		},
		changeClick(id){ //我发出的/我收到的
			this.sendIndex = id
			this.$nextTick(() => {
				this.getData() //再次调用接口，未来需要传递参数
      });
		},
		//我发出的
		changeStatus(e){ 
			this.status = e;
			this.getData();// 再次调用任务管理列表
		},
		// 我收到的
		changeStatus1(e){  
			this.status = e;
			this.getData();// 再次调用任务管理列表
		},
		queryOrder(){ //查询任务名称
		  this.pageNum = 1; //重新请求第一页
		  this.getData(); //调用连麦涨粉-任务管理-列表
		},
		btnOpr(key,index){ //详情和取消的操作
		  this.index =key; //控制每一行row的index
			this.oprIndex =index //控制操作按钮的状态切换
			if(index === 1){
				this.taskId = this.taskList[key].id
        const {href} = 	this.$router.resolve({path:'/myAddFans/newtask',query:{id:this.taskId}})	//跳转页面,传递过去任务id，
        window.open(href, '_blank')
			}else if(index === 2){
					this.$confirm('是否确定取消?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.taskId = this.taskList[key].id //取消前再次设置id即可
					this.cancelTask(); //调用取消任务的接口
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '取消失败'
					// });          
				});
			}
		},
		// 我发出的
		btnOpr1(key,index){ //详情和取消的操作
		  this.index1 =key; //控制每一行row的index
			this.oprIndex1 =index //控制操作按钮的状态切换
			if(index === 1){
				this.taskId = this.taskList[key].id
				this.$router.push({path:'/myAddFans/jumpdetail',query:{id:this.taskId}})
			}else if(index === 2){
					this.$confirm('是否确定取消?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.taskId = this.taskList[key].id //取消前再次设置id即可
					this.cancelTask(); //调用取消任务的接口
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '取消失败',
					// });          
				});
			}
		},
		// 我收到的
		btnOpr2(key,index){ //详情和取消的操作
		  this.index1 =key; //控制每一行row的index
			this.oprIndex1 =index //控制操作按钮的状态切换
			if(index === 0){
				this.taskId = this.taskList[key].id; //传递任务id
				this.$router.push({path:'/jumpdetail',query:{id:this.taskId}})	//跳转页面,传递过去任务id，
        window.open(href, '_blank')
			}else if(index === 1){
					this.$confirm('是否确定接受?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.taskId = this.taskList[key].id; //传递对应的任务id
					this.agreeContactTask(); //调用接受连麦的接口 
					this.getData(); //再次调用主播列表数据初始化接口 刷新列表
				})
			}else if(index === 2){
					this.$confirm('是否确定拒绝?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					this.taskId = this.taskList[key].id
					this.refuseContactTask(); //调用拒绝连麦的接口
					this.getData(); //再次调用主播列表数据初始化接口 刷新列表
				})
			}
		},
		getData(){ //连麦涨粉-任务管理-列表
		  this.loading = true;
		  if(this.sendIndex == 1){
				this.typeId = 1;
			}else{
				this.typeId = 2;
			}
			let params ={
				pageSize:this.pageSize,  //每页条数
				pageNum:this.Num,  //第一页
				pages:this.pages, //总页数
				total:this.total, //总的条数
				name:this.name, //搜索任务名称
				startTime:this.startTime, //开始日期
				endTime:this.endTime, //结束日期
				type:this.typeId, //到底是发出的，还是收到的`
				status:this.status, // 1审核中 2对接中 3对接完成 4 未通过 5 已取消
			}
			this.$axios.$post('contactTaskList',params).then(res => {
				this.loading = false;
				if(res.status === 200 ){
					this.taskList = res.obj.list //添加过来的数据
					this.total = res.obj.total;
				}else{
					this.$message.warning(res.msg)
				}
			})
			.catch(error => {
				 this.$message.warning('请求失败')
			})
		},
		cancelTask(){ //连麦涨粉-任务管理-取消任务
			this.loading = true;
			let params ={
				id:this.taskId, //取消任务,拿到对应的任务列表的任务id
			}
			this.$axios.$post('cancelContactTask',params).then(res => {
        this.loading = false;
				if(res.status === 200 ){
					this.$message({
						type:'warning',
						message:res.msg,
						duration:1000
					})
					this.getData()
				}else{
					this.$message({
						type:'warning',
						message:res.msg,
						duration:1000
					})
				}
			})
			.catch(error => {
				this.$message.warning('请求失败')
			})
		},
		agreeContactTask(){ //连麦涨粉-任务管理-接受连麦
			this.loading = true;
			let params ={
				id:this.taskId, //接受连麦,拿到对应的任务列表的任务id
			}
			this.$axios.$post('agreeContactTask',params).then(res => {
 				this.loading = false;
				if(res.status === 200 ){
					this.$message.success(res.msg)
				}else{
					this.$message.warning(res.msg)
				}
			})
			.catch(error => {
				this.$message.warning('请求失败');
				this.loading = false;
			})
		},
		refuseContactTask(){ //连麦涨粉-任务管理-拒绝连麦
			this.loading = true;
			let params ={
				id:this.taskId, //拒绝连麦,拿到对应的任务列表的任务id
			}
			this.$axios.$post('refuseContactTask',params).then(res => {
				this.loading = false;
				if(res.status === 200 ){
					this.$message.success(res.msg)
				}else{
					this.$message.warning(res.msg)
				}
			})
			.catch(error => {
				this.$message.warning('请求失败');
				this.loading = false;
			})
		},
	},
	mounted(){
		this.getData() //任务详情列表接口
	}
}
</script>

<style scoped>
  .taskm-wrap{
		padding:20px;
		font-size:14px;
		background:url('~assets/images/taskbg.png')
  }
	.taskm-wrap-title{
		display:flex;
		font-weight:bold;
	}
  .taskm-wrap-text{
		line-height:2px;
		cursor:pointer;
	}
  .taskm-wrap-text:nth-child(1){
		margin-left:20px;
	}
  .taskm-wrap-text:nth-child(2){
		margin-left:70px;
	}
	.text-active{
		color:#0096e6;
	}
  .select-detail{
		width: 557px;
		display:flex;
		justify-content: space-between;
		color:#666666;
		margin-top: 35px;
  }
  .order-right{
		display:flex;
		justify-content: space-between;
		align-items: center;
		width:230px;
		color:#666666;
		font-size: 14px;
		padding-bottom:20px;
		box-sizing: border-box;
  }
  .el-select{
		width:120px;
  }
  .el-button{
		padding:8px 14px 8px 24px;
  }
  .select-time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
		padding:0;
		width:370px;
  }
  .select-time .time-right {
		width: 100px;
		height: 30px;
		background: #0096e6;
		color: #fff;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		border-radius: 100px;
		cursor: pointer;
  }
  .time-box {
		display: flex;
		align-items: center;
		text-align: center;
		position:relative;
  }
  .time-box p {
		width: 38px;
		height:30px;
		line-height:30px;
		text-align:center;
  }
  .time-box {
		display: flex;
		align-items: center;
  }
  .time-style {
		width: 110px;
  }
  .time-left {
		display: flex;
		align-items: center;
		width:370px;
  }
  .time-left-txt {
		font-size: 14px;
		color: #666;
		margin-right: 12px;
  }
  .order-brief{
		display:flex;
		width:379px;
		align-items: center;
		overflow: hidden;
  }
  .order-wrap-code{
		width:470px;
		display:flex;
  }
  .order-text-r{
		color:#666666;
  }
  .order-left-name{
		margin-right:12px;
  }
  .order-status{
		margin-right:12px;
		white-space:nowrap;
  }
  .order-brief>input{
		display:inline-block;
		width: 258px;
		height: 30px;
		border:1px solid #ebebeb;
		border-radius:3px;
		text-indent:10px; 
		box-sizing: border-box;
  }
  .order-brief>input:focus{
		border:1px solid #0096e6;
  }

  .order-wrap-query,.data-wrap-export{
		font-size: 14px;
		background-color: #0096e6;
		color:#fff;
		border-radius:15px;
		padding:8px 22px;
		box-sizing: border-box;
		outline: none;
		border: none;
		cursor: pointer;
  }
	.order-wrap-query:hover{
		background:#66B1FF;
	}
  .data-wrap {
		margin-top: 10px;
		background: #fff;
		padding: 0 52px 47px;
  }
  .data-wrap-detail {
		height: 70px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 14px;
  }
  .data-wrap-show {
		height: 27px;
		color: #0096e6;
		border-bottom: 1px solid #0096e6;
		margin-left: -27px;
  }
  .calendar1{
		position:absolute;
		top:13px;
		left:90px;
		z-index:100;
  }
  .calendar2{
		position:absolute;
		top:13px;
		right:4px;
		z-index:100;
  }
  /* 任务列表 */
	.ta-list-container{
		margin-top:30px;
	}
  .ta-list-wrapper{
		font-weight:bold;
		color:#666666;
		font-size:14px;
  }
  .ta-list-wrapper .one{
		height:37px;
		color:#333333;
  }
  .ta-list-wrapper .two{
		height:76px;
  }
  .ta-wrap-list{
		display:flex;
		align-items:center;
		text-align:center;
  }
  .ta-wrap-list:nth-child(odd){
		background:#f8f9fb;
  }
  .ta-wrap-list .name{
		width:15%;
  }
  .ta-wrap-list .date{
		width:13%;
  }
  .ta-wrap-list .plat{
		width:10%;
  }
  .ta-wrap-list .anchor{
		width: 10%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
		height:16px;
  }
  .ta-wrap-list .budget{
		width:12%;
		white-space: nowrap;
  }
  .ta-wrap-list .time{
		width:12%;
  }
  .ta-wrap-list .status{
		width:12%;
  }
	.ta-wrap-list .operation{
		width:15%;
  }
  .ta-wrap-list .status{
		display:flex;
		align-items:center;
		flex-direction:column;
  }
  /* 已成功连麦 */
  .ta-wrap-list .status .status-success-margin{
		margin-top:12px;
		color:#c2c2c2;
		font-weight:400;
  }
  .ta-wrap-item .ta-wrap-text{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    height: 16px;
    line-height: 1.1;
		word-wrap:break-word;
		text-indent:5px;	
  }
  /* status状态的两种颜色 */
  .one-acticve{
		color:#20ba39;
  }
  .one-acticve1{
		color:#20ba39;
  }
  .one-acticve2{
		color:#20ba39;
  }
  .two-active{
		color:#e73547;
  }
  .two-active1{
		color:#e73547;
  }
  .two-active2{
		color:#e73547;
  }
  .ta-wrap-list .date{
		display:flex;
		flex-direction:column;
		justify-content:center;
  }
  .date .ta-wrap-date{
		line-height:1.2
  }
  .ta-wrap-list .date .ta-wrap-date{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap
  }
  .ta-wrap-list .operation{
		display:flex;
		align-items:center;
		justify-content:center;
  }
	/* 我发出的 */
  .ta-wrap-list .operation .ta-operation-btn{
		width: 70px;
		height: 28px;
		background:#f0f9fe;
		color:#0096e6;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		border-radius: 15px;
		cursor: pointer;
		user-select: none;
  }
	.ta-wrap-list .operation .ta-operation-btn:hover{
    color:#ffffff;
    background:#0096e6
  }
	/* 我收到的 */
  .ta-wrap-list .operation .ta-operation-btn1{
		width: 50px;
		height: 28px;
		background:#f0f9fe;
		color:#0096e6;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		border-radius: 15px;
		cursor: pointer;
		user-select: none;
  }
	.ta-wrap-list .operation .ta-operation-btn1:hover{
    color:#ffffff;
    background:#0096e6
  }
  .ta-wrap-list .operation .ta-o-active{
		color:#ffffff;
		background:#0096e6;
  }
  .ta-operation-btn:nth-child(even){
		margin:0 10px;
  }
  .ta-operation-btn1:nth-child(even){
		margin:0 10px;
  }
	/* 按钮禁用 */
  .btn-disabled{
		background-color: gainsboro !important; 
		cursor: not-allowed !important;
		pointer-events:none;
		color:#ffffff !important;
	}
 /* table表格的暂无数据 */
  .no-wrap{
    height:60px;
    line-height: 60px;
    text-align:center;
    font-size: 14px;
    color: #909399;
    border:1px solid #EBEEF5 ;
    margin-bottom:20px;
		font-weight:normal;
  }
/* 分页样式 */
	.pagination .pageSearch:hover{
		background:#66B1FF;
	}
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:30px 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
	}
	input::-webkit-input-placeholder{
		color:#C0C4CC;
	}
	input::-moz-input-placeholder{
		color:#C0C4CC;
	}
	input:-ms-input-placeholder{
		color:#C0C4CC;
	}
	/* lelmentUI设置的样式 */
  .el-input--small .el-input__inner{
		height:30px !important;
  }
	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
  /deep/ .el-input__suffix{
		right:10px;
  }
  /deep/ .el-icon-date::before{
		content:''
  }
  /deep/ .el-select .el-input .el-input__inner{
		height:30px;
		line-height:30px
  }
  /deep/ .el-select .el-input .el-input__icon{
		line-height:30px;
  }
</style>
